import {addResizeListener, removeResizeListener} from 'element-ui/src/utils/resize-event'

const doResize = async (el, binding, vnode) => {
  // console.log(el, binding, vnode)
  const {value} = binding

  const outerOffset = (value && value.outerOffset) || 0

  const height = window.innerHeight - 100 - outerOffset
  // console.log(window.innerHeight, outerOffset, height)
  el.style.height = height + 'px'
}

export default {
  bind(el, binding, vnode) {
    el.resizeListener = async () => {
      await doResize(el, binding, vnode)
    }
    addResizeListener(el, el.resizeListener)
    addResizeListener(window.document.body, el.resizeListener)
  },
  async inserted(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  async componentUpdated(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  unbind(el) {
    removeResizeListener(el, el.resizeListener)
  }
}
